<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>待办列表</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link href="../css/common.css" rel="stylesheet" />
    <style type="text/css">
      body{
        background-color: #fff;
      }
    </style>
	</head>

	<body>
    <div id="container">
      <header class="mui-bar mui-bar-nav">
          <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
          <h1 class="mui-title">我的待办</h1>
      </header>
      <div id="refreshContainer" class="mui-scroll-wrapper bg-white mui-content">
        <div class="mui-scroll">
          <ul class="mui-table-view commonList">
            
          	<li class="flex justify-between align-center" v-for="item in list" @click="toDetail(item)">
          	  <!-- <img src="../img/new@2x.png" alt="" class="new"> -->
          	  <div class="mui-table-cell flex-sub" style="padding-left: 30px;">
          	    <p class="text-grey text-sm">{{item.typeName}}</p>
          	    <p class="text-block text-df">{{item.targetName}}</p>
          	    <p class="text-grey text-sm"><span>{{time(item.createDate)}}</span> <span>{{item.createUserName}}</span></p>
          	  </div>
          	  <!-- <div class="tag-sm bg-blue text-white text-sm round">
          	    <span>模型修改</span>
          	  </div> -->
          	</li>
          </ul>
        </div>
      </div>
    </div>
  <script src="../../../js/mui.min.js"></script>
  <script src="../../../js/vue.js"></script>
  <script src="../../../js/jquery-1.7.2.min.js"></script>
  <script src="../../../js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
  <script src="../../../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
  <script src="../../../js/mui.dtpicker.js"></script>
  <script src="../js/sqlite.js"></script>
  <script src="../js/mkeyplus.base.js"></script>
		<script type="text/javascript">
			mui.init()
      var wait = null;
      var size = 15;
      var page = 0;
      mui.init({
        pullRefresh: {
          container: "#refreshContainer", //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
          down: { //下拉刷新
            style: 'circle',
            height: 50, //可选,默认50.触发下拉刷新拖动距离,
            auto: false, //可选,默认false.首次加载自动下拉刷新一次
            contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
            contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
            contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
            callback: async function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
              page = 0;
              load(page);
              ////没有更多内容了，endPulldown 传入true， 不再执行下拉刷新
              mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
              // countDown++;
            }
          },
          up: { //上拉加载
            height: 50, //可选.默认50.触发上拉加载拖动距离
            auto: false, //可选,默认false.自动上拉加载一次
            contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
            contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
            callback: async function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
              /*每次加载动态的添加一个li*/
              // $("#testUl").append($("<li>" + new Date() + "</li>"));
              this.endPullupToRefresh(false)
              page++;
              load(page);
            }
          }
        }
      });
      mui.plusReady(function() {
        load(page);
      })
      wait = new Vue({
      	el: '#container',
        data: {
        	height1: 0, // 列表高度
          list:[]
        },
        created:function() {
          this.initHeight()
        },
        methods: {
          // 设置高度
          initHeight: function() {
          	var height = window.innerHeight - 95;
          	this.height1 = height;
          },
          time(time) {
            var date = new Date(time);
            var year = date.getFullYear();
            var mon = date.getMonth() + 1;
            var day = date.getDate();
            var hours = date.getHours();
            var minu = date.getMinutes();
            var sec = date.getSeconds();
            return year + '-' + mon + '-' + day + ' ' + hours + ':' + minu + ':' + sec;
          },
          toDetail(item){
            mui.openWindow({
              url: '../waitList/detail.html',
              id: '../waitList/detail.html',
              extras: {
                pageId: item.id
              }
            })
          }
        }
      })
      window.addEventListener("update", function(e) {
        console.log('更新数据');
        page=0;
        load(page);
        var opener= plus.webview.currentWebview().opener();
        var id=opener.id
        page = plus.webview.getWebviewById(id);
        mui.fire(page,'update');
      });
      function load(page) {
        if(page===0){
          plus.nativeUI.showWaiting('加载中...');
        }
        mui.baseApp.httpRequst("/api/task/backlog", {
          page: page,
          size: size
        }, function(data) {
          plus.nativeUI.closeWaiting();
          if (page == 0) {
            wait.list = []
          }
          wait.list = wait.list.concat(data.records)
          // console.log('设备档案数据' + JSON.stringify(data))
          //如果每次获取数据小于10条,或未获取成功则显示没有更多了.
          if (data.records.length < size) { //
            mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
            mui('#refreshContainer').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
            return;
          } else {
            mui('#refreshContainer').pullRefresh().endPullupToRefresh(false); //参数为true代表没有更多数据了。
            mui('#refreshContainer').pullRefresh().enablePullupToRefresh(); //启用上拉加载
          }
        }, function() {
          plus.nativeUI.closeWaiting()
          console.log("获取数据失败");
        })
      }
		</script>
	</body>

</html>
